Hi Dai Gei Ho~ 我是Winnie～

在昨天的文章中，我們有簡單的提到 Composition API 的出現 是為了解決 過去Vue 在 編寫功能上 難以被重複利用 的問題 ，但這邊還是要提一下 雖然出現了Composition API 的用法，但 Option API 的用法目前還是可以在 Vue3 中使用的。

而到這邊，我猜你一定會想問， 既然Option API都還可以使用 我幹嘛要冒險 換成Composition API 啊？

嗯我懂你的感覺，這就好比當我們習慣的日常，突然被發現了問題但它不影響生活時，就不敢隨意更改怕破壞這個日常，所以只好先放著了。 就像下圖：

但別擔心， 我們先來聽聽 以下 Option API的寫法 會碰到的問題，您日後再來決定是否要跟進

Option API:

<script>

export default {
  components: {
    
  },
  data() {
    return {
      //資料狀態A
      //資料狀態B
    };
  },
  computed: {
    //功能Ａ
    //功能B
  },
  methods: {
    //功能Ａ
    //功能B
    
  },
  watch:{
     //功能Ａ
    //功能B
  }
  //略...
};
</script>

從以上 Option API 程式範例中，我們可以看到 程式結構 主要會以屬性 來做切分，像是資料狀態 可以放進 data中，事件方法會放進methods裡等，而這樣 分門別類的用法在初期 似乎 可以有效的管理程式碼，感覺很棒，

但是你知道的，隨著時間的增長，專案因為需求變更也會變得複雜，而其中明明是相同操作邏輯，卻散落在元件的個地方，導致對應屬性的程式碼有所增長 （示意如上圖），這樣時間久了不僅不利於程式碼維護，而之後想再使用某功能，卻因為資料狀態依賴關係 也無法重複使用了。

解決程式功能與邏輯的 重複使用

而針對 Option API 難以被重複使用的缺點，在當時Vue有提供幾種方式來解決 像是 自定義指令directive、Mixins 等（以上Vue3目前都支援）。

雖然以上幾種方式，目前 在Vue3 還是支援使用的，但其中 Mixins 是較爲不建議使用的了，為什麼呢？

Mixins

Mixins 主要功能 是用來提供不同元件內的屬性重複使用，

而用法如下：

首先，我們先自訂mixins物件:

 const sayHiMixins ={
 methods:{
    sayHi(){
        console.log('Hi')
    }
 },
 created(){
     this.sayHi()
 }
 }

要使用的時候，在元件加上mixins屬性來引入 sayHiMixins:

//component winnie
app.component('component-wu',{
 mixins:[sayHiMixins]
})

//component winnie
app.component('component-hsu',{
 mixins:[sayHiMixins]
})

而在 兩個子元件中，分別就有 hello()與 created 的功能了，有沒有感覺很方便？但是事情沒有那麼簡單啊

當今天一樣因為時間累積，需求不停變更，同時累積了許多子子孫孫的mixins，這時身為後代的你就是痛苦的開始，為什麼呢？

讓我們來看看以下例子：當今天有好幾個 mixins

 // mixins sayHi
 const winnieSayHi ={
 methods:{
    data(){
      return{
       name: 'winnie',
      }
    },
    methods:{
      sayHi(){
        return console.log(this.name +'say Hi')
      }
   },  
 }
 
const wuSayHi ={
 methods:{
    data(){
      return{
       name: 'Wu',
      }
    },    
 }
 
 const everyBody ={
 methods:{
    data(){
      return{
       name: 'Name',
      }
    }, 
    
    methods:{
      sayHi(){
        return console.log(this.name +'say Hi')
      }
   },
 }
 

今天 三個 mixins 同時要在 兩個元件中被使用 會出現什麼結果？

//component winnie
app.component('component-wu',{
 mixins:[wuSayHi,everyBody]
})

//component hsu
app.component('component-hsu',{
 mixins:[winnieSayHi],
 data(){
 return name: hsu
 }
})

對的，你想得沒錯，因為在不知道 component 內部的狀態與資料 ，當功能一多，很容易就會造成 功能先後執行的錯誤訊息 與 命名的衝突，同時 當 mixins 越寫越多時，要找出問題，也就會變得困難。

所以後來 針對以上針對以上Vue2所有產生的問題， 在Vue3中 就出現 Composition api的 用法。

而究竟Composition api 是如何解決的，我們就留在下篇文章來回答囉！以上就是今天的文章 如有問題 再請大家多多指教 謝謝。